<template>
	<view class="uni-collapse">
		<slot />
	</view>
</template>
<script>
/**
	 * Collapse 折叠面板
	 * @description 展示可以折叠 / 展开的内容区域
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=23
	 * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
	 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
	 * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
	 */
export default {
	name: 'uniCollapse',
	emits:['change','activeItem','input','update:modelValue'],
	props: {
		value: {
			type: [String, Array],
			default: ''
		},
		modelValue: {
			type: [String, Array],
			default: ''
		},
		accordion: {
			// 是否开启手风琴效果
			type: [Boolean, String],
			default: false
		},
	},
	data() {
		return {};
	},
	computed: {
		// TODO 兼容 vue2 和 vue3
		dataValue() {
			let value = (typeof this.value === 'string' && this.value === '') ||
					(Array.isArray(this.value) && this.value.length === 0);
			let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
					(Array.isArray(this.modelValue) && this.modelValue.length === 0);
			if (value) {
				return this.modelValue;
			}
			if (modelValue) {
				return this.value;
			}

			return this.value;
		}
	},
	watch: {
		dataValue(val) {
			this.setOpen(val);
		}
	},
	created() {
		this.childrens = [];
		this.names = [];
	},
	mounted() {
		this.setOpen(this.dataValue);
	},
	methods: {
		setOpen(val) {
			let str = typeof val === 'string';
			let arr = Array.isArray(val);
			this.childrens.forEach((vm) => {
				if (str) {
					if (val === vm.nameSync) {
						if (!this.accordion) {
							console.warn('accordion 属性为 false ,v-model 类型应该为 array');
							return;
						}
						vm.isOpen = true;
					}
				}
				if (arr) {
					val.forEach(v => {
						if (v === vm.nameSync) {
							if (this.accordion) {
								console.warn('accordion 属性为 true ,v-model 类型应该为 string');
								return;
							}
							vm.isOpen = true;
						}
					});
				}
			});
			this.emit(val);
		},
		setAccordion(self) {
			if (!this.accordion) return;
			this.childrens.forEach((vm) => {
				if (self !== vm) {
					vm.isOpen = false;
				}
			});
		},
		resize() {
			this.childrens.forEach((vm) => {
				// #ifndef APP-NVUE
				vm.getCollapseHeight();
				// #endif
				// #ifdef APP-NVUE
				vm.getNvueHwight();
				// #endif
			});
		},
		onChange(isOpen, self) {
			let activeItem = [];
				
			if (this.accordion) {
				activeItem = isOpen ? self.nameSync : '';
			} else {
				this.childrens.forEach((vm) => {
					if (vm.isOpen) {
						activeItem.push(vm.nameSync);
					}
				});
			}
			this.$emit('change', activeItem);
			this.emit(activeItem);
		},
		emit(val) {
			this.$emit('input', val);
			this.$emit('update:modelValue', val);
		}
	}
};
</script>
<style lang="scss" scoped>
	.uni-collapse {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		flex-direction: column;
		background-color: $uni-bg-color;
	}
</style>
